import { Component } from "react";
import "./index.css";
import Stats from "./stats";
import Todos from "./todos";

class App extends Component {
    state = {
        data: [
            {
                id: 1,
                title: "本赛季要上王者",
                done: true
            }, {
                id: 2,
                title: "从老婆手里要到卖皮肤的钱",
                done: false
            }
        ]
    }

    //添加todo
    addTodo = (title) => {
        const { data } = this.state;
        // state 属于不可变量，唯一修改state的办法，就是通过setState,去映射一个新的state，尤其注意state中有引用类型时，不要修改原有引用，而是返回一个新的引用
        // 引用类型：
        // 1.传值和传址（引用）对象就是引用类型，传值过程就是传址过程
        // let dataTwo = data.concat();
        // return dataTwo;

        // 错误演示，添加引用类型
        // data.push({
        //     id: Date.now(),
        //     title,
        //     done: false
        // })
        this.setState({
            data: [...data, {
                id: Date.now(),
                title,
                done: false
            }]
        })
    }

    //删除todo
    removeTodo = (id) => {
        const { data } = this.state
        this.setState({
            data: data.filter(item => item.id !== id)
        })
    }

    //修改完成状态
    changeDone = (id, done) => {
        let { data } = this.state;
        //错误操作，不能直接修改state值
        // data = data.forEach(item => {
        //     if (item.id === id) {
        //         item.done = done
        //     }
        // })

        //正确操作
        data = data.map(item => {
            if (item.id === id) {
                return {
                    ...item,
                    done
                }
            }
            return item
        })
        this.setState({
            data
        })
    }

    //编辑todo
    editDone = (id, title) => {
        let { data } = this.state;
        //正确操作
        data = data.map(item => {
            if (item.id === id) {
                return {
                    ...item,
                    title
                }
            }
            return item
        })
        this.setState({
            data
        })
    }
    //鼠标事件添加todo
    keyDownEventer = (e) => {
        if (e.keyCode === 13) { //回车键
            let val = e.target.value;
            if (val.trim()) {
                this.addTodo(val);
                e.target.value = "";
            }
        }
    }

    render() {
        const { data } = this.state
        return (
            <div id="todoapp">
                <h1>todo</h1>
                <div className="content">
                    <div id="create-todo">
                        <input id="new-todo" placeholder="What needs to be done?" autoComplete="off" type="text" onKeyDown={this.keyDownEventer} />
                    </div>
                    <Todos data={data} changeDone={this.changeDone} removeTodo={this.removeTodo} editDone={this.editDone} />
                    <Stats data={data} />
                </div>
            </div>
        )
    }
}

export default App;